<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品多规格设置</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css">
    <style>
        *{ margin: 0; padding: 0; box-sizing: border-box;}
        .infinitus_cont{ width: 100%; font-size: 14px; background:#F7F8FA; overflow: hidden; position: relative;}
        .inf_spec{ background-color: #FFF; padding-bottom: 24px;}
        .inf_group_btn{ padding: 0 15px;}
        .inf_btn{ display: inline-block; flex-shrink: 0; line-height: 35px; background-color: #409EFF; color: #FFF; border-radius: 4px; font-size: 14px; padding: 0 20px; cursor: pointer;}
        .inf_btn+.inf_btn{ margin-left: 10px;}
        .inf_icon{ padding-left: 15px;}
        .inf_icon .van-icon{ font-size: 16px; vertical-align: middle; margin-top: -2px;}

        .spec_box{ padding: 10px 15px; border-top: 1px solid #EEE;}
        .spec_box:first-child{ margin-top: 0;}
        .spec_name{ display: flex; max-width: 400px; height: 35px; margin: 10px 0;}
        .spec_box input{ flex: 1 1 0; outline: none; overflow: hidden; height: 35px; line-height: 35px; border-radius: 4px 0 0 4px; border: 1px solid #CCC; padding: 0 9px; vertical-align: top;}
        .spec_box .inf_btn{ border-radius: 0; vertical-align: top;}
        .spec_close{ flex-shrink: 0; width: 40px; line-height: 33px; text-align: center; font-size: 22px; font-weight: bold; color: #00C0EF; border: 1px solid #CCC; border-left: 0; vertical-align: top; cursor: pointer; border-radius: 0 4px 4px 0;}
        .spec_close.red_bg{ border-color: transparent; background-color: #E4393C; color: #FFF;}

        .spec_item_cont{ display: flex; flex-wrap: wrap; margin: 12px 0 0;}
        .spec_item{ display: flex; width: 48%; max-width: 180px; height: 35px; margin-bottom: 12px; margin-right: 15px;}

        .inf_format{ margin: 20px 0;}
        .inf_format_title{ padding: 20px 0; text-indent: 20px; color:#999;}
        @media screen and (max-width: 480px) {
            .spec_item_cont{ justify-content: space-between;}
            .spec_item{ margin-right: 0;}
        }

        .inf_format .edit_suc .van-cell__value{ color:#08e074;}
        .inf_format .edit_err .van-cell__value{ color:#E4393C;}
        .format_box{ display: flex; flex-wrap: wrap; justify-content: space-between;}
        .format_box .format_inp{ display: flex; width: 48%; line-height: 25px; margin-top: 12px;}
        .format_box .format_inp:nth-child(-n+2){ margin-top: 0;}
        .format_box .format_inp span{ flex-shrink: 0;}
        .format_box .format_inp input{ flex: 1 1 0; border-width:0 0 1px 0; overflow: hidden;}
        ::-webkit-input-placeholder{ color:#EEE;}
    </style>
</head>
<body>
    <div class="infinitus_cont" v-loading.fullscreen="loading" element-loading-text="正在提交..." id="infinitus_body">
        <!-- 规格设置 -->
        <div class="inf_spec">
            <div class="spec_box" v-for="(item, index) in attrs">
                <div class="spec_name">
                    <input type="text" v-model="item.name" placeholder="规格名称(例如：颜色)" />
                    <div class="inf_btn" @click="addItem(index)">添加规格项</div>
                    <div class="spec_close red_bg" @click="deleteSpec(index)">×</div>
                </div>
                <div class="spec_item_cont">
                    <div class="spec_item" v-for="(val, key) in item.values">
                        <input type="text" v-model="val.name" />
                        <div class="spec_close" @click="deleteItem(index, key)">×</div>
                    </div>
                </div>
            </div>
            <div class="inf_group_btn">
                <div class="inf_btn inf_icon" @click="addSpec">
                    <van-icon name="plus" ></van-icon>
                    <span>添加规格</span>
                </div>
                <div class="inf_btn inf_icon" @click="cartesian">
                    <van-icon name="replay" ></van-icon>
                    <span>刷新规格项目表</span>
                </div>
            </div>
        </div>

        <!-- 规格项目表 -->
        <div class="inf_format">
            <div class="inf_format_title">规格项目表</div>
            <van-collapse v-model="active" accordion @change="toggleCollapse">
                <!-- item.status => 编辑状态 (0: 未操作, 1: 未编辑, 2: 已编辑) -->
                <van-collapse-item :title="item.name" :class="{'edit_suc': item.status == 2, 'edit_err': item.status == 1}" :value="item.status == 2 ? '已编辑' : item.status == 1 ? '未编辑' : '编辑'" :name="index" v-for="(item, index) in formatList">
                    <div class="format_box">
                        <div class="format_inp">
                            <span>售价：</span>
                            <input type="text" v-model="item.market_price" placeholder="售价" />
                        </div>
                        <div class="format_inp">
                            <span>库存：</span>
                            <input type="text" v-model="item.stock" placeholder="库存" />
                        </div>
                        <div class="format_inp">
                            <span>原价：</span>
                            <input type="text" v-model="item.product_price" placeholder="原价" />
                        </div>
                        <div class="format_inp">
                            <span>成本价：</span>
                            <input type="text" v-model="item.cost_price" placeholder="成本价" />
                        </div>
                        <div class="format_inp">
                            <span>一级佣金：</span>
                            <input type="text" v-model="item.one_bkge" placeholder="一级佣金" />
                        </div>
                        <div class="format_inp">
                            <span>二级佣金：</span>
                            <input type="text" v-model="item.two_bkge" placeholder="二级佣金" />
                        </div>
                    </div>
                </van-collapse-item>
            </van-collapse>
        </div>

        <!-- 保存 -->
        <div class="inf_btn" style="display: block; width: 200px; margin: 20px auto; text-align: center;" @click="submit">保存</div>
    </div>

<script src="http://cache.weikuw.com/tpl/static/lib/js/jquery-2.1.4.min.js"></script>
<script src="http://cache.weikuw.com/tpl/static/lib/js/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
<script>
    var multiformat = new Vue({
        el: '#infinitus_body',
        data(){
            return {
                attrs: [
                    { id: 0, name: '类型', values: [ { id: 1, name: '单门'}, { id: 2, name: '双门'}]},
                    { id: 3, name: '容量', values: [ { id: 4, name: '50L'}, { id: 5, name: '100L'}]},
                    { id: 6, name: '制冷', values: [ { id: 7, name: '效果差'}, { id: 8, name: '正常'}, { id: 9, name: '无法启动'}]},
                    // { id: 10, name: '外观', values: [ { id: 11, name: '外观完好'}, { id: 12, name: '破碎/掉漆'}]}
                ],
				loading: false,
                formatList: [],
                active: 0,
                seq: 10
            }
        },
        created(){
			// let sku_info = {};
			// this.attrs = sku_info.attrs || [];
			// this.scoreList = sku_info.scoreList || [];
			// this.seq = sku_info.seq || 0;
			console.log('Multiformat Start:', this);
		},
        watch: {
            active(newValue, oldValue){
                if(newValue === '' || oldValue !== ''){
                    let item = this.formatList[oldValue],
                        arr = ['stock', 'cost_price', 'product_price', 'market_price'];
                    item.status = 2;
                    for(var i in arr){
                        if(item[arr[i]] == ''){
                            item.status = 1;
                            continue;
                        }
                    }
                    // console.log('watch active item:', item);
                }
            }
        },
        methods: {
            addSpec(){
                this.attrs.push({
                    id: this.seq++,
                    name: '',
                    values: []
                });
            },
            deleteSpec(idx){
                this.attrs.splice(idx, 1);
            },
            addItem(index){
                this.attrs[index].values.push({
                    id: this.seq++,
                    name: ''
                });
            },
            deleteItem(idx, key){
                this.attrs[idx].values.splice(key, 1);
            },
            //更新多规格设置
            cartesian(){
                if (this.attrs.length < 2){
                    this.formatList = this.attrs[0] || [];
                    return false;
                }
                let formatList = this.attrs.reduce(function (total, current) {
                    let res = { values: []},
                        item = {
                            id: '', name: '', status: 0, stock: '',
                            cost_price: '', product_price: '',
                            market_price: '', one_bkge: 0, two_bkge: 0
                        };
                    // console.log('reduce:', total, current);
                    total.values.forEach(c => {
                        current.values.forEach(s => {
                            let t = Object.assign({}, item, {
                                id: c.id + '_' + s.id,
                                name: c.name + ' / ' + s.name
                            });
                            // console.log('current:', c, s);
                            res.values.push(t);
                        })
                    });
                    // console.log('cartesian:', res);
                    return res;
                });
                // console.log('formatList:', formatList);
                this.formatList = formatList.values;
            },
            toggleCollapse(e){
                console.log('toggleCollapse:', e);
            },
            submit(){
                let _this = this,
					sku_info = {
						attrs: this.attrs,
                        formatList: this.formatList,
						seq: this.seq
					};
                console.log('sku_info:', sku_info);
            }
        }
    });
</script>
</body>
</html>